<template>
    <el-upload
    action="https://upload-z1.qiniup.com" 
    list-type="picture-card" 
    :auto-upload="false" 
    :limit="limit" 
    v-model:file-list="fileList"
    :class="[showadd && !preview ? '' : 'hide-upload']"
    :style="{'--width':width+'px','--height': height+'px'}" 
    :multiple="multiple" 
    :on-change="uploadChange" 
    :before-upload="beforeUpload"
    :on-error="uploadError"
    :http-request="HouImgFile"
    >
        <el-icon>
            <Plus />
        </el-icon>
        <template #file="{ file }">
                <el-image 
                lazy
                :src="file.url" 
                fit="cover"
                :style="{ width: width + 'px', height: height + 'px' , }" />
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                    </span>
                    <span  class="el-upload-list__item-delete" @click="handleRemove(file)" v-if="!preview">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </span>
                </span>
        </template>
    </el-upload>
    <el-image-viewer 
    v-if="imgViewerVisible"  
    :url-list="fileList.map(v => v.url)" 
    :initial-index="previewIndex" 
    @close="closeImgViewer"/>
</template>

<script setup>
import {ref, watch,nextTick } from 'vue'

import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
const imgViewerVisible = ref(false)
const showadd= ref(true)
const previewIndex = ref(0);

let fileList = ref([])
let props = defineProps({
    limit: {
        type: Number,
        default: 1
    },
    multiple: {
        type: Boolean,
        default: false
    },
    height:{
        type:Number,
        default:200
    },
    width:{
        type:Number,
        default:200
    },
    imglist:{
        type:Array,
        default:[]
    },
    preview:{
        type:Boolean,
        default:false
    }
})
watch(
    ()=>props.imglist,
    (newval)=>{
        fileList.value = newval
        if(fileList.value.length>=props.limit){
            showadd.value = false
        }
        if (!newval.length) {
            showadd.value = true;
        }
    },{
        immediate:true,
        deep:true,
    }
)

let loadchange = defineEmits(['update:imglist'])
/* 校验图片格式和大小 */
const beforeUpload = (file)=>{
    if (rawFile.type !== 'image/jpeg' || rawFile.type !== 'image/png') {
    ElMessage.error('请选取正确的图片格式(jpg/png)')
    return false
    } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('上传的图片不要大于10M');
    return false
    }
  return true
}
const closeImgViewer = () => {
    previewIndex.value = 0;
    imgViewerVisible.value = false;
}
const uploadChange = (file) => {
    nextTick(() => {
    if (fileList.value.length >= props.limit) {
        showadd.value = false;
    }
    loadchange('update:imglist', fileList.value); // 修改父组件的文件值
  }); 
}
const handleRemove = (file) => {
    let {url} =file
    let index=fileList.value.findIndex(v => v.url == url)
    if(index!=-1){
        fileList.value.splice(index,1);
    }
    /* let indexx=previewlist.value.findIndex(v => v.uid == file.uid)
    if(indexx!=-1){
        previewlist.value.splice(indexx,1);
    } */
    showadd.value = true;
    loadchange('update:imglist', fileList.value)
}

const handlePictureCardPreview = (file) => {
    let index = fileList.value.findIndex(v => v.uid == file.uid)
    previewIndex.value = index; 
    imgViewerVisible.value = true
}

function uploadError(err, file, fileList) {
    this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
    });
}
/* 上传图片文件 */
async function HouImgFile(required){
    loadchange('update:imglist', fileList.value); // 修改父组件的文件值
}
</script>

<style lang="less" scoped>
.hide-upload{
:deep(.el-upload--picture-card) {
    display: none;
  }
}
:deep(.el-upload-list--picture-card) {
  display: flex;
}
:deep(.el-upload-list__item){
    width:var(--width);
    height:var(--height);
}
:deep(.el-upload--picture-card){
    width:var(--width);
    height:var(--height);
}
</style>